<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>周末作业_倒计时</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      body {
        width: 100vw;
        height: 100vh;
        background-color: rgba(123, 66, 165, 0.5);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
      }
      #box {
        transform: translate(0);
        transition: transform 1s;
      }
      p {
        font-size: 20px;
        font-weight: bold;
        color: #7b42a5;
        text-shadow: 2px 1px 3px #eee;
        text-align: center;
        letter-spacing: 0.2rem;
      }
      p:last-child {
        font-size: 22px;
      }
      span {
        margin-left: 0.5rem;
      }
    </style>
  </head>
  <body>
    <div id="box">
      <p id="textInfo">距离2023年双十一还有</p>
      <p id="timeInfo">
        <span id="Day"></span>天<span id="Hours"></span> 小时<span
          id="Minutes"
        ></span>
        分<span id="seconds"></span>秒
      </p>
    </div>
  </body>
  <script>
    var box = document.querySelector("#box");
    var timeInfo = document.querySelector("#timeInfo");
    var textInfo = document.querySelector("#textInfo");
    var Day = document.querySelector("#Day");
    var Hours = document.querySelector("#Hours");
    var Minutes = document.querySelector("#Minutes");
    var seconds = document.querySelector("#seconds");
    var body = document.querySelector("body");

    // 倒计时定时器
    var timeClock = setInterval(function () {
      var time1 = new Date();
      var time2 = new Date(2023, 10, 11, 00, 00, 00);
      var dtime = time2 - time1; //相差的时间戳
      var day = Math.floor(dtime / 1000 / 60 / 60 / 24);
      var hour = Math.floor((dtime / 1000 / 60 / 60) % 24);
      var min = Math.floor((dtime / 1000 / 60) % 60);
      var sec = Math.floor((dtime / 1000) % 60);
      Day.innerText = day;
      Hours.innerText = hour;
      Minutes.innerText = min;
      seconds.innerText = sec;
    }, 1000);

    // 随机数
    function getRandom(a, b) {
      var max = Math.max(a, b);
      var min = Math.min(a, b);
      var random = Math.floor(Math.random() * (max - min + 1)) + min;
      return random;
    }

    // 移动的定时器
    var moveClock = setInterval(function () {
      var moveX = getRandom(-100, 100);
      var moveY = getRandom(-100, 100);
      box.style.transform = `translate(${moveX}px,${moveY}px)`;
    }, 2000);

    // 背景色变动的定时器
    var colorClock = setInterval(function () {
      var colOne = getRandom(0, 255);
      var coltwo = getRandom(0, 255);
      var colthree = getRandom(0, 255);
      body.style.backgroundColor = `rgba(${colOne}, ${coltwo}, ${colthree},0.3)`;
      textInfo.style.color = `rgb(${colOne}, ${coltwo}, ${colthree})`;
      timeInfo.style.color = `rgb(${colOne}, ${coltwo}, ${colthree})`;
    }, 2000);

    // 清除定时器
    // clearInterval(moveClock);
    // clearInterval(colorClock);
  </script>
</html>
